<template>
  <div class="app-root" :class="themeClass">
    <div class="app-container">
      <p>{{ msg }}</p>
      <select v-model="theme">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Dynamic Themes',
      theme: 'red'
    }
  },
  computed: {
    themeClass () {
      return `theme-${this.theme}`
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
  .app-root{background: $background}
  // @import '../style/theme';
  .app-container {
    @include themify($themes) {
      color: themed('font-color');
    }
  }
</style>
